@extends('layouts._main')

@section('title',$prerogative->name)

@section('css')
    <style>
        body{

        }
        .body{
            font-size: 14px;
            padding: 20px 0px;
        }
        .inline{
            display: inline-block;
        }
        .top{
            height: 50px;
            line-height: 50px;
            padding-left: 15px;
            padding-right: 15px;
        }
        .bck-img{
            width: 50px;
            height: 50px;
            float: right;
        }
        .pow_cont{
            width: 100%;
            margin-top: 40px;
        }
        .pow_bck{
            background: url("{{ empty($item->image)?'/images/version1/icon_yaoqin.png':$item->image }}") no-repeat;
            background-size: 20px 20px;
            padding: 0 0 0 25px;
            width: 25%;
            vertical-align: top;
        }
        .content{
            padding-left: 15px;
            padding-right: 15px;
        }
        .content_desc{
            word-wrap:break-word;
            word-break:break-all;
            width: 64%;
        }
        .desc{
            margin-top: 30px;
            padding-left: 15px;
            padding-right: 15px;
        }
        .desc>p:nth-child(1){
            font-size: 16px;
            margin: 10px 0;
        }
        .desc>p:nth-child(2){
            line-height: 18px;
        }
        .nav_bar{
            background-color: #fff;
            padding: 10px 15px;
            text-align: center;
            border-bottom: 1px solid #D0D0D0;
        }
        .nav_bar>.nav_back {
            background: url('/images/version1/icon_bar_back.png') no-repeat;
            background-size: 20px 20px;
            display: inline-block;
            float: left;
        }
        .accumulative_total{
            margin: 10px 0px;
            background-color: #fff;
            padding: 5px 15px;
        }
        .gift{
            width: 80%;
            margin: 10px auto;
        }
        .get_fuli{
            float: right;
            text-align: center;
        }
        .get_fuli,.icon{
            display: inline-block;
            height: 50px;
        }
        .icon{
            width: 50px;
            background: url('/images/version1/icon_yaoqin.png') no-repeat;
            background-size: 100% 100%;
        }
        .git_button{
            outline: none;
            outline: none;
            background: #ddd;
            border: 1px solid #ddd;
            color: #fff;
            width: 64px;
            height: 28px;
            font-size: 10px;
            border-radius: 15px;
            line-height: 17px;
            margin-top: 14px;
        }
        .exchange_active{

            background: #E0DAA6;
            border: 1px solid #ddd;
            color: #fff;

        }
        .exchange{
            background: #ddd;
            border: 1px solid #ddd;
            color: #fff;
        }
    </style>
@endsection

@section('container')
    <div class="nav_bar">
        权益详情
        <div class="nav_back"></div>
    </div>
    <div class="body">
        <div class="top">
            <div class="inline top_name">
                <h2>{{ $prerogative->name }}</h2>
            </div>

            <div class="bck-img" style="background: url('{{ empty($item->image)?'/images/version1/icon_yaoqin.png':$item->image }}') no-repeat; background-size: 100% 100%"></div>
        </div>

        <div class="content">
            <div class="pow_cont">
                <div class="pow_bck inline">权益内容：</div>
                <div class="inline content_desc">{{ $prerogative->content }}</div>
            </div>
            <div class="pow_cont">
                <div class="pow_obj inline">权益对象：</div>
                <div class="inline content_desc">{{ $to_member }}</div>
            </div>
            <div class="pow_cont">
                <div class="pow_obj inline">使用渠道：</div>
                <div class="inline content_desc">{{ $prerogative->channel }}</div>
            </div>
        </div>

        @if($prerogative->id_prerogative==2)
            <div class="accumulative_total">
                <div class="gift">
                    <div class="icon"></div>
                    <div class="get_fuli">
                        <p>领取生日福利</p>
                        <button class="git_button {{ $birthday_gift['status']?'exchange_active':'exchange' }}"
                                data-status="{{ $birthday_gift['status'] }}"
                                data-link="{{ $birthday_gift['link'] }}"
                                data-id="{{ $prerogative->id_wxcard_prerogative }}">{{ $birthday_gift['text'] }}</button>
                    </div>
                </div>
            </div>
        @endif

        <div class="desc">
            <p>权益介绍</p>
            <p>{{ $prerogative->introduce }}</p>
        </div>
    </div>
@endsection

@section('js')
    <script>


        $('.git_button').click(function(){

            var _this = $(this);

            if(_this.hasClass('loadding') || _this.hasClass('exchange')) return false;

            _this.addClass('loadding');

            if(_this.data('link')!='#'){

                if(_this.data('status')==1){
                    $.ajax({
                        url:_this.data('link'),
                        type:'post',
                        data:{'_token':window.laravel_csrf_token,'id':_this.data('id')},
                        dataType:'json',
                        success:function(res){

                            if(res.code==4003){
                                showMsg(res.msg);
                                setTimeout(function () {
                                    window.location.reload();
                                },1500)
                            }
                            showMsg(res.msg);
                            if(res.code==200){
                                _this.removeClass('exchange_active').addClass('exchange').text('已领取');
                            }

                            _this.removeClass('loadding');
                        },
                        error:function(){}
                    });
                }else{
                    _this.click(function () {
                        window.location.href = $(this).data('link');
                    });
                }

            }
        });



    </script>
@endsection